<?php

use app\lib\CommonHelp;
use app\models\Audio;
use app\models\Comment;
use yii\bootstrap\ActiveForm;
use yii\helpers\Html;
use yii\helpers\Url;
use yii\web\User;

/**
 * @var yii\web\View $this
 * @var Audio $audio
 * @var User $user
 * @var bool $ifCollect
 * @var bool $ifPraise
 *
 */

$this->title = $audio->title;

?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <base href="/">
    <meta charset="<?= Yii::$app->charset ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>

    <!--    引入字体图表需要的css-->
    <link rel="stylesheet" href="/font-awesome-4.2.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="media-element/mediaelementplayer.css" />
    <link rel="stylesheet" href="/css/audio.css">

    <script src="js/lib/jquery/jquery.min.js"></script>
    <script src="js/lib/bootstrap/bootstrap.min.js"></script>
</head>
<body>
<?php $this->beginBody() ?>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="header-bar-nav col-xs-4">
            <a href="javascript:history.back();">
                <i class="fa fa-arrow-left" aria-hidden="true"></i>
            </a>
        </div>
        <div class="header-bar-title col-xs-4">
        </div>
        <div class="header-bar-user col-xs-4">
            <!-- 这个属性是收藏后由js添加的 -->
            <a href="<?=Url::to(['/audio/collect'])?>"
               params-audio-id="<?=$audio->id?>" params-if-collect="<?=!$ifCollect?1:0?>"
               data-loading-text="加载中..."
               class="btn btn-default btn-collect <?=$ifCollect ? 'btn-collected' : ''?>">
                <i class="fa fa-star-o" aria-hidden="true"></i> <span><?=$ifCollect ? '已' : ''?>收藏</span>
            </a>
        </div>
    </div>
</nav>

<div class="audio container-fluid">
    <div class="player col-xs-12" >
        <img src="<?= $audio->audio_pic ?>-detail" class="img-responsive" alt="" id="player-img">
        <div class="lyric_wrap"><ul id="lyric"></ul></div>
        <audio preload="auto" src="<?= $audio->audio_url ?>" controls type="audio/mp3"></audio>
    </div>
    <div class="description col-xs-12">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#desc" aria-controls="desc" role="tab" data-toggle="tab">正文</a></li>
            <li role="presentation"><a href="#comment" aria-controls="comment" role="tab" data-toggle="tab">评论</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active col-xs-12" id="desc">
                <div class="time"><?=date("Y年m月d日 H:i", strtotime($audio->release_time))?></div>
                <h1>" <?=$audio->title?></h1>
                <div class="rich-text"><?=$audio->lyric?></div>
                <div class="addition clearfix">
                    <div class="pull-left">
                        <div class="favorite">
                            阅读数 <?=$audio->read_times?>
                            <!--<i class="fa fa-heart" aria-hidden="true"></i>-->
                            <!--<span><?=$audio->praise_num?></span>-->
                        </div>
                    </div>
                    <div class="pull-right">
                        <button href="<?=Url::to(['/audio/praise'])?>"
                                params-audio-id="<?=$audio->id?>" params-if-praise="<?=!$ifPraise?1:0?>"
                                data-loading-text="加载中..." class="btn btn-praise <?=$ifPraise ? 'btn-praised' : ''?>">
                            <i class="fa fa-heart-o" aria-hidden="true"></i> <span><?=$ifPraise ? '已' : ''?>赞</span>
                        </button>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane col-xs-12" id="comment">
            <?php foreach($audio->getComments()->orderBy('ctime desc')->each() as $comment) {
                /** @var Comment $comment */?>
                <!-- 现在数据库里面还没保存，所以这里输出不了 -->
                <div class="comment row clearfix">
                    <div class="avatar pull-left">
                        <img src="
                        <?=$comment->user->avatar?>-avatar" class="img-responsive" alt="">
                    </div>
                    <div class="comment-text">
                        <div class="clearfix user-top-wrap">
                            <div class="user-nickname pull-left">
                                <?=$comment->user->user_name?>
                            </div>
                            <div class="time pull-right">
                                <?= CommonHelp::friendlyTime($comment->ctime) ?>
                            </div>
                        </div>
                        <div class="text">
                            <?=$comment->context ?>
                        </div>
                        <div class="like-or-not pull-right" href="<?=Url::to(['/audio/comment-praise'])?>"
                                params-comment-id="<?=$comment->id?>" params-if-praise="1"
                                data-loading-text="加载中..." lk-action="praise-comment">
                            <i class="fa fa-heart-o"></i><span class="link-num"><?=$comment->praise_num?></span>
                        </div>
                    </div>
                </div>
            <?php } ?>
            <?php if($user) { ?>
                <?php $form = ActiveForm::begin([
                    'action'=>Url::to(['/audio/comment']),
                    'options' => [
                        'lk-role'=>'ajax-form'
                    ]
                ]); ?>
                <input type="hidden" name="audio_id" value="<?=$audio->id?>">
                <div class="comment row col-xs-12 clearfix hidden" id="add-comment">
                    <div class="pull-left avatar">
                        <img src="<?=$user->avatar?>-avatar" class="img-responsive" alt="">
                    </div>
                    <div class="comment-text">
                        <div class="control-textarea">
                            <textarea name="context" rows="4" title="评论正文" placeholder="请输入你的评论">……</textarea>
                        </div>
                    </div>
                    <div class="pull-right control-input">
                        <input type="submit" value="提交" />
                    </div>
                </div>
                <?php ActiveForm::end(); ?>
                <div class="link-to-input row col-xs-12">
                    <input type="text" name="linkToInput" id="linkToInput" placeholder="来说点什么吧~~">
                </div>
            <?php } else { ?>
                <div class="link-to-input row col-xs-12">
                    <a href="<?= Url::to(['/user/login']) ?>">
                    <input type="text" name="linkToInput" id="linkToInput" placeholder="来说点什么吧~~">
                    </a>
                </div>
            <?php } ?>
            </div>
        </div>
    </div>
</div>

<script type="text/plain" id="lyric-text"><?=$audio->music_lyric?></script>
<script src="media-element/mediaelement-and-player.min.js"></script>
<script src="js/util/ajax.js"></script>
<script src="js/util/ajax-ui.js"></script>
<script>
    $player = $('audio');
    $player.mediaelementplayer({
        alwaysShowControls: true,
        features: ['playpause','volume','progress'],
        audioVolume: 'horizontal',
        audioWidth: $(document).width(),
        audioHeight: 30,
        success: function(mediaElement, originalNode) {

        }
    });

    // 处理歌词
    function parseLyric(lrc) {
        var lyrics = lrc.split("\n");
        var lrcObj = {};
        for(var i=0;i<lyrics.length;i++){
            var lyric = decodeURIComponent(lyrics[i]);
            var timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g;
            var timeRegExpArr = lyric.match(timeReg);
            if(!timeRegExpArr)continue;
            var clause = lyric.replace(timeReg,'');

            for(var k = 0,h = timeRegExpArr.length;k < h;k++) {
                var t = timeRegExpArr[k];
                var min = Number(String(t.match(/\[\d*/i)).slice(1)),
                    sec = Number(String(t.match(/\:\d*/i)).slice(1));
                var time = min * 60 + sec;
                lrcObj[time] = clause;
            }
        }
        return lrcObj;
    }
    var text_temp;
    function updateLyric(){
        var currentTime = Math.round(this.currentTime);
        var lrc = lrcData[currentTime];
        if(!lrc)return;
        var text = lrc.text;
        if(text != text_temp){
            locationLrc(lrc);
            text_temp = text;
            console.log(text);
        }
        function locationLrc(lrc){
            $lyric.find(".on").removeClass("on");
            var li = $lyric.find("li:nth-child("+(lrc.index+1)+")");
            li.addClass("on");
            var top = Math.min(0,-lrc.top);
            $lyric.css({"-webkit-transform":"translate(0,-"+lrc.top+"px)"});
            $lyric.css({"transform":"translate(0,-"+lrc.top+"px)"});
            // lyric.css({"margin-top":top});
        }
    }

    var lrcObj = parseLyric($('#lyric-text').text());
    console.log(lrcObj);

    var lrcData = {};
    var i = 0;
    var $lyric = $("#lyric");
    var offset = -$lyric.parent().height()*0.4;
    for(var k in lrcObj) {
        var txt = lrcObj[k];
        if(!txt)txt = "&nbsp;";
        lrcData[k] = {
            index:i++,
            text:txt,
            top: offset
        };
        offset += txt.length>20 ? 52 : 31;
        var $li = $("<li>"+txt+"</li>");
        $lyric.append($li);
    }
    console.log(lrcData);
    $player.on('timeupdate', updateLyric)
</script>
<script>
    var $collect = $('.btn-collect');
    $.ajaxUI.button($collect, function () {
        setTimeout(function () {
            if($collect.attr('params-if-collect')==1){
                $collect.find("span").text('已收藏')
            } else {
                $collect.find("span").text('收藏')
            }
            $collect.toggleClass('btn-collected');
            $collect.attr('params-if-collect', 1-$collect.attr('params-if-collect'));
        },100);
    })
</script>
<script>
    var $praise = $('.btn-praise');
    $.ajaxUI.button($praise, function () {
        setTimeout(function () {
            if($praise.attr('params-if-praise')==1){
                $praise.find("span").text('已赞')
            } else {
                $praise.find("span").text('赞')
            }
            $praise.toggleClass('btn-praised');
            $praise.attr('params-if-praise', 1-$praise.attr('params-if-praise'));
        },100);
    })
</script>
<script>
    //  点赞之后不能取消点赞问题，js暂时先不写  TODO
    var $commentPraise = $('[lk-action=praise-comment]');
    $commentPraise.each(function () {
        var $this = $(this);
        $.ajaxUI.button($this, function (data) {
            alert('已赞');
            setTimeout(function () {
                $this.find('span').text(data.data);
            },100);
        })
    })
</script>
<script src="js/audio.js"></script>
<div style="display: none;"><script src="http://s11.cnzz.com/z_stat.php?id=1261300538&web_id=1261300538" language="JavaScript"></script></div>
<?php //$this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>